<template>
  <!-- 云盾告警-活动告警 -->
  <div class="events">
    <a-card class="row row-one" title="查询">
      <div class="query query-one">
        <div class="item">
          <div class="text">综合查询</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
      </div>
      <div class="query query-two">
        <div class="item">
          <div class="text">资源类型</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">告警级别</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">时间选择</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
        <div class="item">
          <div class="text">查询模板</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
      </div>
      <a-collapse ghost>
        <a-collapse-panel class="collapse" key="1" header="高级搜索">
          <div class="query query-three">
            <div class="item">
              <div class="text">资源</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="text">资源分组</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="text">告警分类</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="text">Trap分组</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="text">类型</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="text">所属站点</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="text">接口索引</div>
              <a-input class="input" placeholder="请输入"> </a-input>
            </div>
            <div class="item"></div>
          </div>
        </a-collapse-panel>
      </a-collapse>
      <div class="query query-four">
        <div class="item">
          <a-button class="button">重置</a-button>
          <a-button type="primary">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="row row-two" title="统计">
      <div class="row-two-box">
        <div class="pie">
          <div id="pie"></div>
        </div>
        <div class="bar">
          <div id="bar"></div>
        </div>
      </div>
    </a-card>
    <a-card class="row row-three" title="列表">
      <div class="button-box">
        <div class="button-box-left">
          <a-button class="button">恢复</a-button>
          <a-button class="button">确认</a-button>
          <a-button class="button">删除</a-button>
          <a-button class="button">转自动化作业</a-button>
          <a-button class="button">全部告警操作</a-button>
          <a-button class="button">导出全部</a-button>
          <a-button class="button">导出选中项</a-button>
          <a-button class="button">添加备注</a-button>
          <a-button class="button">取消确认</a-button>
        </div>
        <div class="button-box-right">
          <div class="text">刷新时间间隔</div>
          <a-select class="input" placeholder="请选择">
            <a-select-option value="1">测试1</a-select-option>
            <a-select-option value="2">测试2</a-select-option>
          </a-select>
        </div>
      </div>
      <a-table class="table" :columns="columns" :data-source="tableData">
        <template #bodyCell="{ column }">
          <template v-if="column.dataIndex === 'id1'">
            <a-tag color="red">重要</a-tag>
          </template>
          <template v-if="column.dataIndex === 'id4'">
            <a-tag color="red">未恢复</a-tag>
          </template>
          <template v-if="column.dataIndex === 'id5'">
            <a-tag color="blue">已确认</a-tag>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="operation">
              <span>删除</span>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup lang="ts">
// 引入组件
// 引入方法
import { defineProps, defineEmits, watch, onMounted, ref, nextTick } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({})
const emits = defineEmits([])
// 自定义状态
const innerHeight = window.innerHeight //浏览器视口高度
const innerWidth = window.innerWidth //浏览器视口宽度
const columns = [
  { title: '级别', dataIndex: 'id1' },
  { title: '告警源', dataIndex: 'id2' },
  { title: '告警信息', dataIndex: 'id3' },
  { title: '恢复状态', dataIndex: 'id4' },
  { title: '确认状态', dataIndex: 'id5' },
  { title: '首次时间', dataIndex: 'id6' },
  { title: '操作', dataIndex: 'operation' },
] //列表配置
const tableData = [
  {
    id1: '重要',
    id2: '政务外网区IPS2(172.26.125.242)',
    id3: '网络设备（172.26.125.242）Ten-GigabitEthernet1/1/7]）',
    id4: '未恢复',
    id5: '已确认',
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '重要',
    id2: '政务外网区IPS2(172.26.125.242)',
    id3: '网络设备（172.26.125.242）Ten-GigabitEthernet1/1/7]）',
    id4: '未恢复',
    id5: '已确认',
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '重要',
    id2: '政务外网区IPS2(172.26.125.242)',
    id3: '网络设备（172.26.125.242）Ten-GigabitEthernet1/1/7]）',
    id4: '未恢复',
    id5: '已确认',
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '重要',
    id2: '政务外网区IPS2(172.26.125.242)',
    id3: '网络设备（172.26.125.242）Ten-GigabitEthernet1/1/7]）',
    id4: '未恢复',
    id5: '已确认',
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '重要',
    id2: '政务外网区IPS2(172.26.125.242)',
    id3: '网络设备（172.26.125.242）Ten-GigabitEthernet1/1/7]）',
    id4: '未恢复',
    id5: '已确认',
    id6: '2025-03-28 12:12:30',
  },
  {
    id1: '重要',
    id2: '政务外网区IPS2(172.26.125.242)',
    id3: '网络设备（172.26.125.242）Ten-GigabitEthernet1/1/7]）',
    id4: '未恢复',
    id5: '已确认',
    id6: '2025-03-28 12:12:30',
  },
] //列表数据
onMounted(() => {
  nextTick(() => {
    createPie()
    createBar()
  })
})
// 自定义方法
//创建饼图
const createPie = () => {
  var chartDom = document.getElementById('pie')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'item',
    },
    graphic: {
      type: 'text',
      left: '28%',
      top: 'center',
      style: {
        text: 156,
        fill: '#1f1f1f', // 文本颜色
        fontSize: (18 / 1080) * innerHeight,
        fontWeight: 'bold',
      },
    },
    legend: {
      orient: 'vertical',
      height: (150 / 1080) * innerHeight,
      itemGap: (10 / 1080) * innerWidth,
      top: 'center',
      left: '50%',
      itemHeight: (18 / 1080) * innerHeight,
      itemWidth: (18 / 1080) * innerWidth,
      textStyle: {
        color: '#1f1f1f',
        fontSize: (16 / 1080) * innerHeight,
      },
      formatter: function (name) {
        var seriesData = [
          { value: 10, name: '未管理' },
          { value: 70, name: '正常' },
          { value: 10, name: '次要' },
          { value: 15, name: '严重' },
          { value: 29, name: '未知' },
          { value: 12, name: '警告' },
          { value: 10, name: '重要' },
        ]
        for (var i = 0; i < seriesData.length; i++) {
          if (seriesData[i].name === name) {
            return name + ': ' + seriesData[i].value
          }
        }
        return name
      },
    },
    series: [
      {
        name: '数量',
        type: 'pie',
        radius: ['100%', '60%'],
        center: ['30%', '50%'], // 调整饼图的中心位置
        label: {
          show: false,
          position: 'center',
        },
        data: [
          { value: 10, name: '未管理' },
          { value: 70, name: '正常' },
          { value: 10, name: '次要' },
          { value: 15, name: '严重' },
          { value: 29, name: '未知' },
          { value: 12, name: '警告' },
          { value: 10, name: '重要' },
        ],
      },
    ],
  }

  option && myChart.setOption(option)
}
//创建柱状图
const createBar = () => {
  var chartDom = document.getElementById('bar')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: 0,
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '正常',
        type: 'bar',
        stack: 'Ad',
        barWidth: 20,
        emphasis: {
          focus: 'series',
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: '次要',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series',
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '重要',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series',
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
    ],
  }

  option && myChart.setOption(option)
}
</script>
<style lang="less" scoped>
.events {
  .row {
    margin-bottom: (20 / @vh);
  }
  .row-one {
    .query {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        display: flex;
        align-items: center;
        width: 22%;
        margin-bottom: (20 / @vh);
        .text {
          margin-right: (10 / @vw);
          width: (80 / @vw);
          text-align: right;
        }
        .input {
          flex: 1;
        }
        .button {
          margin-right: (10 / @vw);
        }
      }
      .item-time {
        width: 30%;
      }
    }
    .query-one {
      .item {
        width: 100%;
      }
    }
    .query-three {
    }
    .query-four {
      .item {
        margin-bottom: 0;
      }
    }
    .collapse {
      :deep(.ant-collapse-content-box) {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  .row-two {
    .row-two-box {
      display: flex;
      .pie {
        width: 50%;
        #pie {
          width: 100%;
          height: (210 / @vh);
        }
      }
      .bar {
        width: 50%;
        #bar {
          width: 100%;
          height: (210 / @vh);
        }
      }
    }
  }
  .row-three {
    .button-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: (10 / @vh);
      .button-box-left {
        display: flex;
        .button {
          margin-right: (10 / @vw);
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .button-box-right {
        display: flex;
        align-items: center;
        .text {
          margin-right: (10 / @vw);
        }
        .input {
          width: (200 / @vw);
        }
      }
    }
    .table {
      .operation {
        span {
          margin-right: (10 / @vw);
          color: @tc;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
